import { StarIcon, ClockIcon } from 'lucide-react';
import { Link } from 'react-router-dom';
import { ImageWithLoader } from '../ImageWithLoader';
export function LatestReviews() {
  const reviews = [{
    id: '1',
    title: 'Bosch Series 8 Smart Oven Review',
    image: 'https://images.unsplash.com/photo-1631679706909-1844bbd07221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1992&q=80',
    category: 'Kitchen',
    rating: 4.6,
    date: '2 days ago',
    excerpt: 'Precision temperature control and intuitive app make this oven a standout choice for modern kitchens with its exceptional baking performance and smart features.'
  }, {
    id: '2',
    title: 'Dyson Pure Cool TP07 Air Purifier Review',
    image: 'https://images.unsplash.com/photo-1594142243342-41d20b96e928?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80',
    category: 'Climate',
    rating: 4.8,
    date: '1 week ago',
    excerpt: 'Exceptional filtration with detailed air quality monitoring and voice control capabilities make this a top-tier choice for those concerned about indoor air quality.'
  }, {
    id: '3',
    title: 'Nest x Yale Smart Lock: Long-term Test',
    image: 'https://images.unsplash.com/photo-1582555172866-f73bb12a2ab3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Security',
    rating: 4.5,
    date: '2 weeks ago',
    excerpt: 'After six months of use, this smart lock proves its reliability and convenience for everyday home security with seamless Google Home integration.'
  }, {
    id: '4',
    title: 'Samsung Smart Washer-Dryer Combo Review',
    image: 'https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
    category: 'Laundry',
    rating: 4.4,
    date: '3 weeks ago',
    excerpt: 'Space-saving design with AI fabric detection and remote monitoring capabilities for modern homes with limited laundry space but demanding cleaning needs.'
  }];
  return <section className="py-16 bg-[#f8f9fa]">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-end mb-8">
          <div>
            <h2 className="text-3xl font-bold">Latest Reviews</h2>
            <p className="text-gray-600">
              Our most recent in-depth evaluations
            </p>
          </div>
          <Link to="/reviews" className="text-[#d4a373] hover:underline font-medium">
            View all reviews →
          </Link>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {reviews.map(review => <Link key={review.id} to={`/reviews/${review.id}`} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow group">
              <div className="relative">
                <ImageWithLoader src={review.image} alt={review.title} className="w-full h-48 object-cover" />
                <div className="absolute top-4 left-4">
                  <span className="bg-[#343a40] text-white text-xs px-2 py-1 rounded">
                    {review.category}
                  </span>
                </div>
              </div>
              <div className="p-5">
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center">
                    <StarIcon size={16} className="text-[#ffd166] fill-[#ffd166]" />
                    <span className="ml-1 text-sm font-medium">
                      {review.rating}/5
                    </span>
                  </div>
                  <div className="flex items-center text-gray-500 text-xs">
                    <ClockIcon size={14} className="mr-1" />
                    <span>{review.date}</span>
                  </div>
                </div>
                <h3 className="font-bold text-lg mb-2 line-clamp-2 h-14">
                  {review.title}
                </h3>
                <div className="relative group/tooltip">
                  <p className="text-gray-600 text-sm mb-3 line-clamp-2">
                    {review.excerpt}
                  </p>
                  {/* Tooltip */}
                  <div className="absolute bottom-full left-0 right-0 mb-2 p-3 bg-gray-800 text-white text-sm rounded-lg shadow-lg opacity-0 invisible group-hover/tooltip:opacity-100 group-hover/tooltip:visible transition-all duration-300 z-10">
                    {review.excerpt}
                    <div className="absolute top-full left-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-gray-800"></div>
                  </div>
                </div>
                <span className="text-[#d4a373] text-sm font-medium">
                  Read full review
                </span>
              </div>
            </Link>)}
        </div>
      </div>
    </section>;
}